<template>
  <span class="action-player">
    <Button class="action-button action" :loading="loading" :disabled="!actionEnable" v-show="buttonShow" :icon="actionIcon" :type="buttonType" @click="buttonTrigger">
      {{actionModel.name}}
    </Button>
    <Player @loading="playerLoading" ref="player" :url="soundPath" v-show="false"></Player>
  </span>
</template>

<script>
import base from "../actionBase";
import $ from "@/common";
import Player from "@/element/player";
export default {
  extends: base,
  data() {
    return {
      playIndex: 0, //当前播放序数，主要用于控制行内按钮的播放状态
      playing: false,
      soundPath: null,
      buttonType: "success",
      actionIcon: "play"
    };
  },
  methods: {
    buttonTrigger() {
      this.actionTrigger();
    },
    actionTrigger(id, data, index) {
      this.playIndex = index;
      if (index !== undefined) {
        this.playing = false;
        this.soundPath = $.composePath(this.actionModel.path, data);
        this.$inlineMirror.forEach((item, itemIndex) => {
          if (itemIndex === index) return;
          if (item.btnIcon === "pause") {
            item.btnIcon = "play";
            item.actionText = "播放";
          }
        });
        if (this.$inlineMirror[index]) {
          if (this.$inlineMirror[index].btnIcon === "pause") {
            this.$inlineMirror[index].btnIcon = "play";
            this.$inlineMirror[index].actionText =
              this.actionModel.name || "播放";
            this.playing = true;
          } else {
            this.$inlineMirror[index].btnIcon = "pause";
            this.$inlineMirror[index].actionText = "暂停";
          }
        }
      }
      if (!this.playing) {
        this.$player.play();
        this.actionIcon = "pause";
        this.playing = true;
      } else {
        this.$player.pause();
        this.actionIcon = "play";
        this.playing = false;
      }
    },
    playerLoading(v) {
      this.loading = v;
      if (this.playIndex !== undefined && this.$inlineMirror[this.playIndex]) {
        this.$inlineMirror[this.playIndex].loading = v;
      }
    }
  },
  mounted() {
    this.$player = this.$refs.player;
  },
  components: {
    Player
  }
};
</script>
<style lang="less">

</style>
